.vp-changelog-wrapper {
  margin-block: 1rem;
  padding-inline: 1rem;
  border-radius: 8px;

  background-color: var(--changelog-bg);
  color: var(--changelog-c-text);

  font-size: var(--changelog-font-size);
  line-height: 1.7;

  transition: background-color var(--vp-t-color);

  &.active {
    padding-block: 0 0.5rem;
  }

  a {
    text-decoration: none !important;

    &::after {
      display: none !important;
    }
  }
}

.vp-changelog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;

  padding-block: 1rem;

  font-weight: bold;

  cursor: pointer;

  @media (max-width: 419px) {
    flex-wrap: wrap;
  }

  .vp-changelog-wrapper.active & {
    padding-block-end: 0.5rem;
  }
}

.vp-changelog-icon,
.vp-changelog-menu-icon {
  display: inline-block;
  vertical-align: middle;

  width: 1.2em;
  height: 1.2em;
  margin-inline-end: 4px;

  background-color: currentcolor;
  color: var(--vp-c-text-mute);

  mask: var(--icon) no-repeat;
  mask-size: 100% 100%;

  transition: color var(--vp-t-color);

  transform: translateY(-1px);
}

.vp-changelog-icon {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' d='M2.71 10.96a6.5 6.5 0 1 0-.69-3.53M2 8l1.5-1.5M2 8L.5 6.5m8 2v-4m0 4h3'/%3E%3C/svg%3E");
}

.vp-changelog-menu-icon {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M4 5h0.01'/%3E%3Cpath d='M8 5h12'/%3E%3Cpath d='M4 10h0.01'/%3E%3Cpath d='M8 10h12'/%3E%3Cpath d='M4 15h0.01'/%3E%3Cpath d='M8 15h12'/%3E%3Cpath d='M4 20h0.01'/%3E%3Cpath d='M8 20h12'/%3E%3C/g%3E%3C/svg%3E");
}

.vp-changelog-list {
  display: none;
  margin-block: 0.5rem;
  padding-inline-start: 0;
  list-style: none;

  .vp-changelog-wrapper.active & {
    display: block;
  }
}

.vp-changelog-item-tag,
.vp-changelog-item-commit {
  position: relative;
  margin-block-start: 8px;
  padding-inline-start: 20px;

  &:first-child {
    margin-block-start: 0;
  }

  &::before {
    content: '';

    position: absolute;
    top: 3px;
    left: 0;

    display: inline-block;

    width: 1.25em;
    height: 1.25em;

    background-color: currentcolor;
    color: var(--vp-c-text-subtle);

    mask: var(--icon) no-repeat;
    mask-size: 100% 100%;

    transition: color var(--vp-t-color);
  }
}

.vp-changelog-item-commit::before {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M9 12a3 3 0 1 0 6 0a3 3 0 1 0-6 0m3-9v6m0 6v6'/%3E%3C/svg%3E");
}

.vp-changelog-item-tag::before {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M6.5 7.5a1 1 0 1 0 2 0a1 1 0 1 0-2 0'/%3E%3Cpath d='M3 6v5.172a2 2 0 0 0 .586 1.414l7.71 7.71a2.41 2.41 0 0 0 3.408 0l5.592-5.592a2.41 2.41 0 0 0 0-3.408l-7.71-7.71A2 2 0 0 0 11.172 3H6a3 3 0 0 0-3 3'/%3E%3C/g%3E%3C/svg%3E");
}

.vp-changelog-tag {
  margin-inline-end: 4px;
  text-decoration: none;

  code {
    font-weight: 500;
    font-size: 14px;
  }
}

.vp-changelog-hash {
  margin-inline-end: 4px;
  text-decoration: none;
}

.vp-changelog-divider {
  margin-inline-end: 8px;
}

.vp-changelog-message {
  margin-inline-end: 8px;
  line-height: 1.7;
}

.vp-changelog-date {
  color: var(--vp-c-text-subtle);
  font-size: 0.75rem;
  transition: color var(--vp-t-color);
}
